import { Divider } from 'antd';
import React from 'react';

function Space({ margin = 8, children, type = 'horizon', divider = undefined, ...rest }) {
  const notNullChildren = React.Children.toArray(children).filter(Boolean);
  const lastIndex = notNullChildren.length - 1;

  if (divider) {
    return (
      <span>
        {notNullChildren.map((child, index) =>
          index === lastIndex ? (
            React.cloneElement(child)
          ) : (
            <span key={index}>
              {React.cloneElement(child)}
              <Divider type={divider} />
            </span>
          )
        )}
      </span>
    );
  }

  return (
    <div style={{ display: type === 'horizon' ? 'inline' : 'block' }} {...rest}>
      {notNullChildren.map((child, index) =>
        React.cloneElement(child, {
          style: {
            [type === 'horizon' ? 'marginRight' : 'marginBottom']:
              index < lastIndex ? `${margin}px` : '0px',
            ...(child.props.style || {}),
          },
        })
      )}
    </div>
  );
}

export default Space;
